<template>
	<view class="">

		<view class="u-m-30">
			<view class="good-list  ">
				<view :id="'good'+item.id" class="good-li u-m-b-15 bg-white b-r-10" v-for="(item,index) in goodlist"
					:key="item.id" @click="handDetails(item)">
					<image class="good-img" :src="item.headImage" mode="widthFix" />
					<view class="flex-item ">
						<view class="u-line-1">{{item.shopName}}</view>
						<view class="u-m-t-15 u-m-b-15">
							<text class="bg-gradual-orange u-p-10 u-font-21 c-fff b-r-5">{{item.cateName}}</text>
						</view>
						<view class="">
							<text class="good-sold">已售0件</text>
							<text class="c-666 u-font-22 u-m-l-30">
								距离：{{item.distanceKm}}KM
							</text>
						</view>
					</view>
				</view>
			</view>
		</view>

	</view>
</template>
<script>
	export default {

		data() {
			return {
				goodlist: [], // 数据列表
				cateId: "",
				gpsLon:"",
				gpsLat:""
			};
		},
		onLoad(opt) {
			uni.setNavigationBarTitle({
				title: opt.cpsname
			});
			this.cateId = opt.cpsCote
		},
		onShow() {
			this.getadress();
			
		},
		methods: {
			//获取定位
			getadress() {
				uni.showLoading({
					title: '加载中'
				});
				let that = this;
				uni.getSetting({
					success(res) {
						if (res.authSetting['scope.userLocation'] == false) { //如果没有授权地理位置
							uni.openSetting({
								success(res) {
									res.authSetting = { //打开授权位置页面，让用户自己开启
										"scope.userLocation": true
									}
								}
							})
						} else {
							//用户开启授权后可直接获取地理位置
							uni.authorize({
								scope: 'scope.userLocation',
								success() {
									//获取位置后相关操作
									that.getLocation();
								}
							})
						}
					}
				})
			},
			getLocation() {
				let that = this;
				uni.getLocation({
					type: 'gcj02',
					success: function(res) {
						// 返回的res:name(地理名称）、address（详细地址，包括省市区相关信息，可根据需要进行拆分）、latitude（纬度）、longitude（经度）
						// console.log("地理名称" + JSON.stringify(res));
						let latitude, longitude;
						latitude = res.latitude.toString();
						longitude = res.longitude.toString();
						that.gpsLat = latitude;
						that.gpsLon = longitude;
						that.addressCompleted = true;
						uni.hideLoading();
						that.upCallback();
					},
					fail: (res) => {
						let text = "";
						switch (res.errMsg) {
							case "getLocation:fail:ERROR_NOCELL&WIFI_LOCATIONSWITCHOFF": {
								text = "请手动打开手机定位和WIFI"
								break;
							}
							case "getLocation:fail:system permission denied": {
								text = "请允许微信访问定位权限"
								break;
							}
							default: {
								text = "获取位置信息报错:" + res.errMsg
							}
						}
						uni.showToast({
							icon: 'none',
							title: text,
						});
						console.log("fail " + text);
					},
				})
			},

			handDetails(item) {
				uni.navigateToMiniProgram({
					appId: item.appId, //目标小程序appid
					path: item.pagePath, //需要打开的目标路径
					extraData: {
						'data1': 'test'
					},
					envVersion: 'release', //小程序版本：develop（开发版），trial（体验版），release（正式版）
					success(res) {
						// 打开成功
					}
				})
			},
			/*上拉加载的回调: 其中page.num:当前页 从1开始, page.size:每页数据条数,默认10 */
			upCallback(page) {
				let data = {
					cateId: this.cateId,
					lng: this.gpsLon,
					lat: this.gpsLat,
				}
				//联网加载数据
				this.$api.getShopListApi(data).then(res => {
					this.goodlist = res.data //追加新数据
				}).catch(() => {

				})
			},
		}

	}
</script>

<style lang="scss" scoped>
	.good-list {
		position: relative;

		.good-li {
			display: flex;
			align-items: center;
			padding: 20rpx;
			border-bottom: 1rpx solid #eee;

			.good-img {
				width: 160rpx;
				height: 160rpx;
				margin-right: 20rpx;

			}

			.flex-item {
				flex: 1;

				.good-name {
					font-size: 26rpx;
					margin-bottom: 10px;
					overflow: hidden;
				}

				.good-price {
					font-size: 26rpx;
					color: #666666;
				}

				.good-sold {
					font-size: 24rpx;
					margin-left: 16rpx;
					color: gray;
				}

			}
		}
	}
</style>